<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>填写核对订单信息</title>
    <link rel="stylesheet" href="__STATIC__/before/style/base.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/before/style/global.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/before/style/header.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/before/style/fillin.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/before/style/footer.css" type="text/css">


</head>
<body>
<!-- 顶部导航 start -->
{include file="public/topnav" /}
<!-- 顶部导航 end -->

<div style="clear:both;"></div>

<!-- 页面头部 start -->
<div class="header w990 bc mt15">
    <div class="logo w990">
        <h2 class="fl"><a href="{:url('Index/index')}"><img src="__STATIC__/before/images/logo.png" alt="京西商城"></a></h2>
        <div class="flow fr flow2">
            <ul>
                <li>1.我的购物车</li>
                <li class="cur">2.填写核对订单信息</li>
                <li>3.成功提交订单</li>
            </ul>
        </div>
    </div>
</div>
<!-- 页面头部 end -->

<div style="clear:both;"></div>

<!-- 主体部分 start -->
<div class="fillin w990 bc mt15">
    <div class="fillin_hd">
        <h2>填写并核对订单信息</h2>
    </div>

    <div class="fillin_bd">
        <!-- 收货人信息  start-->
        <div class="address">
            <h3>收货人信息 <a href="javascript:;" id="address_modify">[修改]</a></h3>
            <div class="address_info">
                <p>{$address->recipient} {$address->phone} </p>
                <p>{$address->address_name} </p>
            </div>

            <div class="address_select none">
                <ul>
                    {volist id="addresses" name="addresses"}
                    <li class="cur">
                        <input type="radio" name="address" />{$addresses->recipient}
                        {$addresses->address_name} {$addresses->phone}

                    </li>
                    {/volist}
                    <li><input type="radio" name="address" class="new_address"/>使用新地址</li>
                </ul>
                <form action="" class="none" name="address_form" method="post" enctype="multipart/form-data">
                    <ul class="addressdetail">
                        <li>
                            <label for=""><span>*</span>收 货 人：</label>
                            <input type="text" name="" class="txt"/>
                        </li>
                        <li>
                            <label for=""><span>*</span>所在地区：</label>
                            <select name="" id="province" onchange="province1111()">
                                <option value="">请选择</option>
                                {volist name="province" id="province" }
                                <option value="{$province.id}">{$province.name}</option>
                                {/volist}
                            </select>
                            <select name="" id="city" onchange="county111()">
                                <option value="">请选择</option>
                            </select>

                            <select name="" id="county">
                                <option value="">请选择</option>

                            </select>
                        </li>
                        <li>
                            <label for=""><span>*</span>详细地址：</label>
                            <input type="text" name="address-detail" class="txt address"/>
                        </li>
                        <li>
                            <label for=""><span>*</span>手机号码：</label>
                            <input type="text" name="phone" class="txt"/>
                        </li>
                    </ul>
                </form>
                <a href="" class="confirm_btn"><span onclick="saveAddress()">保存收货人信息</span></a>
            </div>
        </div>
        <!-- 收货人信息  end-->

        <!--收货地址 三级联动 ajax start-->
        <script>

            function province1111() {
                var obj = document.getElementById("province").value; //定位id
                $.ajax({
                    url: "{:url('User/city')}",
                    type: "post",
                    dataType: "json",
                    data: {"province": obj},
                    success: function (data) {
                        // console.log(data);
                        document.getElementById('city').innerHTML = "";
                        document.getElementById('city').innerHTML = "<option value=''>请选择</option>";
                        for (var i = 0; i < data.length; i++) {

                            document.getElementById('city').innerHTML += "<option value='" + data[i]['id'] + "'>" + data[i]['name'] + "</option>";
                        }
                    }
                })
            }

            function county111() {
                var oCounty = document.getElementById("city").value;
                // console.log(oCounty);
                $.ajax({
                    url: "{:url('county')}",
                    type: 'post',
                    dataType: "json",
                    data: {'county': oCounty},
                    success: function (county) {
                        // console.log(county);

                        document.getElementById('county').innerHTML = "";
                        document.getElementById('county').innerHTML = "<option value=''>请选择</option>";
                        for (var i = 0; i < county.length; i++) {

                            document.getElementById('county').innerHTML += "<option value='" + county[i]['id'] + "'>" + county[i]['name'] + "</option>";
                        }
                    }
                })
            }

            function saveAddress() {
                var addressdetail = document.getElementsByClassName('addressdetail')[0],
                    aIput = addressdetail.getElementsByTagName('input');
                var oCounty1 = document.getElementById("city").value;
                var obj1 = document.getElementById("province").value; //定位id
                var county = document.getElementById("county").value; //定位id

                $.ajax({
                    url: "{:url('saveAddress')}",
                    type: 'post',
                    dateType: "json",
                    data: {
                        'address_name': aIput[1].value,
                        'phone': aIput[2].value,
                        'recipient': aIput[0].value,
                        'region': county
                    },
                    success: function (data1) {
                        console.log(data1);
                    }

                })
            }
        </script>
        <!--收货地址 三级联动 ajax end-->

        <!-- 支付方式  start-->
        <div class="pay">
            <h3>支付方式 <a href="javascript:;" id="pay_modify">[修改]</a></h3>
            <div class="pay_info">
                <p>货到付款</p>
            </div>

            <div class="pay_select none">
                <table>
                    <tr class="cur">
                        <td class="col1"><input type="radio" name="pay"/>货到付款</td>
                        <td class="col2">送货上门后再收款，支持现金、POS机刷卡、支票支付</td>
                    </tr>
                    <tr>
                        <td class="col1"><input type="radio" name="pay"/>在线支付</td>
                        <td class="col2">即时到帐，支持绝大数银行借记卡及部分银行信用卡</td>
                    </tr>
                </table>
                <a href="#" class="confirm_btn"><span>确认支付方式</span></a>
            </div>
        </div>
        <!-- 支付方式  end-->
        <script>
            var oInput = document.querySelectorAll('.pay_select table tr td.col1 ');
            var txt;
            // console.log(oInput[0].innerHTML);
            for (var i = 0; i < oInput.length; i++) {
                (function (i) {
                    oInput[i].onclick = function () {
                        oInput[i].checked = 'checked';
                        txt = oInput[i].innerHTML;
                        console.log(txt.indexOf('货到付款'));
                    }
                })(i)

            }

            document.querySelector('.pay_select a.confirm_btn span').onclick = function () {
                // console.log(txt);
                document.querySelector('.pay .pay_info p').innerHTML = (txt.indexOf('货到付款') != -1) ? '货到付款' : '在线支付';
                document.querySelector('.pay_select').style.display = 'none';
                document.querySelector('.pay_info').style.display = 'block';
                document.querySelector('h3 a#pay_modify').style.display = 'block';
                document.querySelector('h3 a#pay_modify').style.margin = '-34px 0 0 60px';
            }
        </script>

        <!-- 商品清单 start -->
        <div class="goods">
            <h3>商品清单</h3>
            <table>
                <thead>
                <tr>
                    <th class="col1">商品</th>
                    <th class="col2">规格</th>
                    <th class="col3">价格</th>
                    <th class="col4">数量</th>
                    <th class="col5">小计</th>
                </tr>
                </thead>
                <tbody>
                {volist id='shopCart' name='shopCart'}
                <tr>
                    <td class="col1"><a href=""><img src="__STATIC__/before/images/{$shopCart->img}" alt=""/></a>
                        <strong><a href="">【1111购物狂欢节】{$shopCart->intro}</a></strong></td>
                    <td class="col2"><p>颜色：{$shopCart->color}</p>
                        <p>尺寸：{$shopCart->size}</p></td>
                    <td class="col3">￥{$shopCart->price}</td>
                    <td class="col4"> {$shopCart->num}</td>
                    <td class="col5"><span>￥{$shopCart->price*$shopCart->num}</span></td>
                </tr>
                {/volist}
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5">
                        <ul>
                            <li>
                                <span>{$total} 件商品，总商品金额：</span>
                                <em>￥{$sum}</em>
                            </li>
                            <li>
                                <span>运费：</span>
                                <em>￥{$shopCart->freight}</em>
                            </li>
                            <li>
                                <span>应付总额：</span>
                                <em>￥{$sum}</em>
                            </li>
                        </ul>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <!-- 商品清单 end -->

    </div>

    <div class="fillin_ft">
        <!--<a href="{:url('User/submitOrder')}">-->
        <span onclick="submitOrder111()"></span>
        <!--</a>-->
        <p>应付总额：<strong>￥{$sum}元</strong></p>

    </div>
</div>
<!-- 主体部分 end -->

<div style="clear:both;"></div>
<!-- 底部版权 start -->
<div class="footer w1210 bc mt15">
    {include file="public/footer" /}
</div>
<!-- 底部版权 end -->

<!--获取付款方式  收货人信息  ajax-->
<script>

    function  submitOrder111() {
        var oLi = document.getElementsByClassName('address_select')[0].getElementsByTagName('ul')[0].getElementsByTagName('li');
        var oP = document.getElementsByClassName('pay_info')[0].getElementsByTagName('p')[0];
        var addresses;

        for (var i = 0; i < oLi.length; i++) {

            if(oLi[0].className == 'cur' && oLi[1].className == 'cur')
                 addresses = oLi[0].innerText;

            if (oLi[i].className == 'cur')
                addresses = oLi[i].innerText;  //地址

        }
        pay11 = oP.innerText;//方式
      //   // console.log(pay11);
      // console.log(addresses);
        $.ajax({
            url:"{:url('User/savePay')}",
            type: 'post',
            dateType: "json",
            data: {
                'address':addresses,
                'pay': pay11
            },
            success: function (data1) {
                // console.log(data1);
                // console.log(typeof(data1));
                // console.log(Number(data1));
                if(data1!==0){
                    window.location.href="{:url('User/submitOrder')}?id="+JSON.parse(data1);
                }else{
                    alert("网络错误");
                }
            }

        })
    }


</script>


<script type="text/javascript" src="__STATIC__/before/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="__STATIC__/before/js/cart2.js"></script>

</body>
</html>
